<template>
  <view class="mine-wrap" v-if="info" >
    <view class="merber" @tap="handleToSet" >
      <image class="header" :src="info.avatar || defaultHeader" />
      <view class="desc"  >
        <view class="name" >{{ info.account_name }}</view>
        <view class="role" >{{ info.user_type === 1 ? '个人用户' : info.user_type === 2 ? '个体司机' : info.user_type === 3 ? '跑腿员' : '' }}
        </view>
      </view>

      <view v-if="!info.car_number && info.is_courier !== 1" class="iconfont icon-arrow-right set-arrow"></view>
      <view v-else @tap.stop="handleDefault" >
        <picker @change="bindRoleChange" :value="roleIndex" :range="roleArray">
            <view class="change-btn" >
              切换角色
            </view>
        </picker>
      </view>
    </view>
    <!-- 订单信息 -->
    <!-- 心选订单 -->
    <view class="order">
     <view
      class="li"
      v-if="info.user_type != 3">
      <view class="order__head" @tap="handleToOrderAll">
        <view class="order__head--title">我的订单</view>
        <view class="iconfont icon-arrow-right order__head--icon"></view>
      </view>
      </view>
       <view
      class="li"
      v-if="info.user_type === 3">
      <view class="order__head"  @tap="handleToOrderAll">
        <view class="order__head--title">商城跑腿订单</view>
        <view class="iconfont icon-arrow-right order__head--icon"></view>
      </view>
      </view>
      <view class="order__type"  v-if="info.user_type !== 3">
        <view
          class="order__type--li"
          @tap="handleToOrder(item)"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <image class="order__type--li-img" :src="item.pic"></image>
          <view class="order__type--li-text">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="ceil" >
      <view
      class="li"
      v-if="info.user_type === 2"
      @tap="handleToCart"
       >
        <view class="label" >拼车订单</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
      <view
      class="li"
      v-if="info.user_type !== 3"
      @tap="handleToRun"
       >
        <view class="label" >我的跑腿</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
      <view
      class="li"
      v-if="info.user_type !== 3"
      @tap="handleToQuhuo"
       >
        <view class="label" >我的取货单</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
      <view
      class="li"
      v-if="info.user_type === 3"
      @tap="handleToTickets"
       >
        <view class="label" >上传彩票</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
      <view
      class="li"
      v-if="info.user_type === 3"
      @tap="handleToReceiveRun"
       >
        <view class="label" >跑腿订单</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
      <view
      class="li"
      v-if="info.user_type === 3"
      @tap="handleQuhuoOrderRun"
       >
      <view class="label">取货订单</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
      <view class="li" @tap="handleToCoupon" >
        <view class="label" >我的优惠券</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
      <!--
      <view class="li" @tap="handleToActive" >
        <view class="label" >我的活动</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view> -->
      <view class="li" @tap="handleToAddress" >
        <view class="label" >收货地址</view>
        <view class="iconfont icon-arrow-right arrow-right"></view>
      </view>
    </view>


  </view>
</template>

<script>
import { defaultHeader, orderToatl, orderAwaitSend, orderAwaitReceive,orderFinish, orderRefund} from '@/tool/static-img';
import { USER_INFO, USER_CHANGE_TYPE } from '@/api/user';
export default {
  data() {
    return {
      defaultHeader,
      info: null,
      roleIndex: 0,
      roleArray: [],
      orderList: [
        {
          pic: orderToatl,
          name: '待付款',
          current: 1,
        },
        {
          pic: orderAwaitSend,
          name: '待发货',
          current: 2,
        },
        {
          pic: orderAwaitReceive,
          name: '待收货',
          current: 3,
        },
        {
          pic: orderFinish,
          name: '已完成',
          current: 4,
        },
        {
          pic: orderRefund,
          name: '已取消',
          current: 4,
        },
      ],
    }
  },
  async onLoad() {
    await this.getBindLoginStatus();
    const accessToken = uni.getStorageSync('accessToken');
    if(accessToken) {
      this.getUserInfo();
    }else {
      this.info = {
        account_name: '未登录用户',
        user_type: 1
      }
    }
  },
  async onShow(option) {
    await this.getBindLoginStatus();
    const accessToken = uni.getStorageSync('accessToken');

    if(this.info && this.info.account_name === '未登录用户' && accessToken) {
        this.getUserInfo();
        return
    }

    // 重新登录
    if (option && option.type === 'fromLogin') {

      if(accessToken) {
        this.getUserInfo();
      }
    }
  },
  onPullDownRefresh() {
    // 初始化
    const accessToken = uni.getStorageSync('accessToken');
    if(accessToken) {
      this.getUserInfo();
    }else {
      this.info = {
        account_name: '未登录用户',
        user_type: 1
      }
    }

    uni.stopPullDownRefresh();
  },
  methods: {
    getUserInfo() {
      this.$http.get(USER_INFO)
        .then(res => {
          this.roleArray = ['个人用户'];
          this.info = res.data;

          if(this.info.car_number) {
            this.roleArray.push('个体司机');
          }
          if(this.info.is_courier === 1) {
            this.roleArray.push('跑腿员');
          }

          uni.setStorageSync('nickName', res.data.account_name || '');
          uni.setStorageSync('mobile', res.data.mobile || '');
        })
    },
    handleToCoupon() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'myCoupon'
      })
    },
    handleToOrderAll() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      if(this.info.user_type !==3 ){
      this.$navigate({
        page: 'order'
      })
    }else {
      this.$navigate({
        page: 'runList',
        params:{
          orderType:'1'
        }
      })
    }
    }
    ,
    handleToOrder(item) {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'order',
        params: {
          current: item.current
        }
      })
    },
    bindRoleChange(e) {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      const roleName = this.roleArray[+e.target.value];
      if(roleName === '个人用户') {
        this.info.user_type = 1;
      }else if(roleName === '个体司机') {
        this.info.user_type = 2;
      }else if(roleName === '跑腿员') {
        this.info.user_type = 3;
      }
      this.$http.put(USER_CHANGE_TYPE, {
        user_type: this.info.user_type
      }, {
        showLoading: true
      })
      .then(() => {
        uni.hideLoading();
      })
    },
    handleDefault() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      console.log('默认设置')
    },
    handleToSet() { //信息设置
    const accessToken = uni.getStorageSync('accessToken');
    if (!accessToken) {
      this.$navigate({
        page: 'login',
      });
      return;
    }
      this.$navigate({
        page: 'mineSet'
      })
    },
    handleToAddress() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'address'
      })
    },
    handleToActive() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'mineActive'
      })
    },
    handleToCart() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'cartOrder'
      })
    },
    /**
     * 上传彩票
     */
    handleToTickets() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'uploadTickets'
      })
    },
    /**
     * 我的跑腿
     */
    handleToRun() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'runOrder'
      })
    },
     /**
     * 我的取货单
     */
     handleToQuhuo() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'quhuoOrder'
      })
    },
    /**
     * 去接跑腿订单
     */
    handleToReceiveRun() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'runList',
        params:{
          orderType:'2'
        }
      })
    },
     /**
     * 取货订单
     */
     handleQuhuoOrderRun() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$navigate({
        page: 'quhuoList',
        params:{
          orderType:'7'
        }
      })
    }
  }


};
</script>

<style lang="less">
.mine-wrap {
   .merber{
     position: relative;
     display: flex;
     width: 100%;
     height: 260rpx;
     padding: 28rpx;
     padding-right: 0;
     z-index: 1;
     background-image: linear-gradient(#FFF27C, #F9F9F5);
     .header{
       flex-shrink: 0;
       width: 112rpx;
       height: 112rpx;
       margin-right: 20rpx;
       border-radius: 50%;
     }
     .desc{
       flex: 1;
        .name{
          margin-bottom: 10rpx;
          font-size: 36rpx;
          line-height: 50rpx;
          font-weight: 500;
        }
        .role{
          font-size: 28rpx;
          color: #666666;
        }
     }
     .change-btn{
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 140rpx;
       height: 94rpx;
       padding-left: 10rpx;
       font-size: 26rpx;
       color: #FFF8C8;
       background: linear-gradient(345deg, #FE9300 0%, #FEC800 100%);
       border-radius: 48rpx 0px 0px 48rpx;
     }
     .set-arrow{
       flex-shrink: 0;
       font-size: 50rpx;
       margin-top: 32rpx;
       margin-right: 24rpx;
       color: #999999;
     }
   }
   .order {
     width: 710rpx;
     height: 258rpx;
     padding: 24rpx 28rpx;
     margin: auto;
     margin-bottom: 20rpx;
     border-radius: 20rpx;
     position: relative;
     margin-top: -80rpx;
     z-index: 2;
     background-color: #ffffff;
     &__head {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 36rpx;
       &--title {
         font-size: 32rpx;
         font-weight: 500;
         line-height: 44rpx;
       }
       &--icon {
         font-size: 34rpx;
         color: #cccccc;
       }
     }
     &__type {
       display: flex;
       justify-content: space-between;
       align-items: center;
       &--li {
         text-align: center;
         &-img {
           width: 80rpx;
           height: 80rpx;
           margin: auto;
           margin-bottom: 8rpx;
         }
         &-text {
           font-size: 24rpx;
           line-height: 34rpx;
           color: #494949;
         }
       }
     }
   }
   .ceil{
     width: 710rpx;
     margin: auto;
     border-radius: 20rpx;
     background-color: #FFFFFF;
     .li{
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 110rpx;
       padding: 24rpx 28rpx;
       border-bottom: 1px solid #f5f5f5;
       .label{
         font-size: 28rpx;
       }
       .arrow-right{
         color: #999999;
       }
     }

   }
}
</style>
